<template>
	<view class="container">
		<view class="header_area flex">
			<view class="sign_area flex">
				<view class="sign_circle" v-if="!sign_state" @click="sign_btn">签到</view>
				<view class="sign_circle sign_circle_bg" v-else>已签到</view>
			</view>
		</view>
		<view class="task_area flex">
			<view class="task_title flex"><text></text>任务领取</view>
			<view class="task_card flex" v-for="(item, index) in task_list" :key="index">
				<image :src="item.icon" mode="widthFix"></image>
				<text>{{item.integralDesc}}</text>
				<button class="task_btn" open-type="share" v-if="item.integralTitle.slice(0,2) == '邀请' || item.integralTitle.slice(0,2) == '分享'">{{item.integralTitle.slice(0,2)}}</button>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="cover_page flex" v-if="show_cover">
			<view class="cover_card flex">
				<view class="close_area" @click="show_cover = false"></view>
				<view class="cover_card_title flex">
					<image src="../../static/integral_img/icon_success.png" mode="widthFix"></image>
					<text>签到成功</text>
				</view>
				<image src="../../static/integral_img/money_img.png" class="money_img" mode="widthFix"></image>
				<view class="card_text">+5个积分</view>
				<view class="card_tips flex"><text></text>您已连续签到{{sign_num}}天<text></text></view>
			</view>
		</view>
	</view>
</template>

<script>
import {  
	mapState 
} from 'vuex';  
export default {
	data() {
		return {
			sign_state: false,
			show_cover: false,
			task_arr: [
				{
					icon: '/static/integral_img/icon_share.png',
					text: '分享，可获得积分15个',
					type: '分享'
				},
				{
					icon: '/static/integral_img/icon_invite.png',
					text: '邀请好友加入，可获得积分30个',
					type: '邀请'
				},
				{
					icon: '/static/integral_img/icon_consume.png',
					text: '消费，可获得相应积分',
					type: ''
				},
				{
					icon: '/static/integral_img/icon_recharge.png',
					text: '充值，可获得相应积分',
					type: ''
				},
			],
			task_list: [],
			share_url: '/pages/index/index',
			sign_num: 0
		};
	},
	onHide() {
	},
	destroyed() {
	},
	onShow() {
	},
	onLoad(options) {
		this.get_list_ajax()
		this.get_state_ajax()
	},
	computed: {
		...mapState(['hasLogin','userInfo'])
	},
	onShareAppMessage() {
		this.shareIntegral()
		return {
			title: '光合优选-在线商城',
			imageUrl: 'http://shopmalling-asset.oss-cn-hangzhou.aliyuncs.com/share_bg.jpg',
			path: '/pages/index/index?inviteId=' + this.userInfo.id
		}
	},
	methods: {
		get_list_ajax(){
			this.$api.request('taskintegral', 'taskList', failres => {
				this.$api.msg(failres.errmsg)
			}).then(res => {
				this.task_list = res.data;
			})
		},
		get_state_ajax(){
			this.$api.request('signintegral', 'isSign', failres => {
				this.$api.msg(failres.errmsg)
			}).then(res => {
				this.sign_state = res.data;
			})
		},
		//详情页
		navToDetailPage(groupBarginId) {
			uni.navigateTo({
				url: `/pages/make_group/make_group_detail?groupBarginId=${groupBarginId}`
			})
		},
		// 签到
		sign_btn(){
			this.$api.request('signintegral', 'sign', failres => {
				this.$api.msg(failres.errmsg)
			}).then(res => {
				this.sign_num = res.data.signtimes;
				this.get_state_ajax();
				this.show_cover = true;
			})
		},
		// 分享获取积分
		shareIntegral(){
			this.$api.request('integralDetail', 'shareIntegral', failres => {
				this.$api.msg(failres.errmsg)
			}).then(res => {
				this.$api.msg('分享成功')
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	width: 100%;
	min-height: 100vh;
	background: #ffffff;
	flex-direction: column;
	align-items: center;
}
.flex {
	display: flex;
}

::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.header_area{
	width: 100%;
	height: 300upx;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to bottom, #ff696f, #ff0c5a);
	.sign_area{
		height: 200upx;
		width: 200upx;
		border-radius: 50%;
		background: #FFFFFF;
		align-items: center;
		justify-content: center;
		.sign_circle{
			height: 160upx;
			width: 160upx;
			border-radius: 50%;
			line-height: 160upx;
			text-align: center;
			color: #FFFFFF;
			font-size: 48upx;
			font-weight: bold;
			background-color: #ff4b67;
		}
		.sign_circle_bg{
			background: #cac8c8;
		}
	}
}
.task_area{
	width: 100%;
	flex-direction: column;
	align-items: center;
	.task_title{
		height: 100upx;
		width: 100%;
		align-items: center;
		margin: 20upx 0 15upx 0;
		font-size: 30upx;
		color: #000000;
		font-weight: bold;
		text{
			height: 30upx;
			width: 4upx;
			background: #ff135c;
			margin: 0 7upx 0 30upx;
		}
	}
	.task_card{
		width: 688upx;
		height: 80upx;
		background:rgba(255,255,255,1);
		box-shadow:0px 4upx 12upx 0px rgba(0, 0, 0, 0.07);
		border-radius: 10upx;
		margin-bottom: 20upx;
		align-items: center;
		image{
			width: 40upx;
			margin: 0 30upx;
		}
		text{
			font-size: 24upx;
			color: #000000;
			font-weight: bold;
			flex-grow: 1;
		}
		.task_btn{
			height: 40upx;
			width: 110upx;
			border-radius: 20upx;
			background: #ff135c;
			font-size: 24upx;
			color: #FFFFFF;
			line-height: 40upx;
			text-align: center;
			margin-right: 30upx;
		}
		.task_btn_over{
			background: #e5e5e5;
			color: #373737;
		}
	}
}
.cover_page{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	align-items: center;
	justify-content: center;
	.cover_card{
		position: relative;
		height: 591upx;
		width: 548upx;
		border-radius: 10upx;
		background: #FFFFFF url(../../static/integral_img/card_bg.png) center top no-repeat;
		background-size: 100% 120upx;
		flex-direction: column;
		align-items: center;
		.close_area{
			height: 60upx;
			width: 60upx;
			background: url(../../static/icon_close.png) center no-repeat;
			background-size: 16upx;
			position: absolute;
			top: 0;
			right: 0;
		}
		.cover_card_title{
			height: 80upx;
			margin-bottom: 42upx;
			margin-top: 99upx;
			align-items: center;
			image{
				width: 46upx;
				margin-right: 28upx;
			}
			text{
				font-size: 42upx;
				color: #444444;
			}
		}
		.money_img{
			width: 122upx;
			margin-bottom: 55upx;
		}
		.card_text{
			font-size: 30upx;
			color: #ff135c;
			line-height: 40upx;
			margin-bottom: 45upx;
		}
		.card_tips{
			height: 40upx;
			align-items: center;
			font-size: 24upx;
			color: #a0a0a0;
			text{
				height: 2upx;
				width: 50upx;
				background: #ff4b67;
				margin: 0 14upx;
			}
		}
	}
}
</style>
